<template>
    <div class="page">
      <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>

      </el-form>
        <el-tabs tab-position="left" style="height: 200px;">
          <el-tab-pane label="默认查询年级">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedGrades" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in allSelect" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group>
          </el-tab-pane>
          <el-tab-pane label="默认查询学籍状态">
            <el-checkbox :indeterminate="isIndetermina" v-model="checkA" @change="handleCheckAllChan">全选</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedstate" @change="handleCheckedCitiesChan">
                <el-checkbox v-for="city in state" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group>
          </el-tab-pane>
          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs>
        <!-- <el-button v-if="hasPermission('selectcontent:selectContent:add')" type="primary" size="small" icon="el-icon-plus" @click="save()">新建</el-button> -->
        <br />
        <el-button v-if="hasPermission('selectcontent:selectContent:add')" type="primary" size="small" @click="save()">确定</el-button>


        <!-- 弹窗, 新增 / 修改 -->
    <SelectContentForm  ref="selectContentForm" @refreshDataList="refreshList"></SelectContentForm>
  </div>
</template>

<script>
  import SelectContentForm from './SelectContentForm'
  export default {
    data () {
      return {
        searchForm: {
        },
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: '',
        dataListSelections: [],
        isImportCollapse: false,
        loading: false,
        checkAll: false, // 全选
        checkA: false, // 状态全选
        checkedGrades: [], // 已选中的
        allSelect: [], // 可选项, 采用的是计算机学院的年级
        isIndeterminate: true,
        isIndetermina: true,
        id: '',
        state: ['在籍', '休学', '保留学籍'],
        checkedstate: [] // 选择的状态
      }
    },
    components: {
      SelectContentForm
    },
    activated () {
      this.getGrade()
      this.refreshList()
    },
    methods: {
      // 获取年级
      getGrade () {
        this.loading = true
        this.$http({
          url: '/sys/office/treeData',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.loading = false
            let le = data.treeData[0].children[5].children.length
            this.allSelect = []
            for (let num = 0; num < le; num++) {
              this.allSelect.push(data.treeData[0].children[5].children[num].name)
            }
          }
        })
      },
      save () {
        this.loading = true
        this.$http({
          url: '/selectcontent/selectContent/delete',
          method: 'delete',
          params: {'ids': this.id}
        }).then(({data}) => {
          if (data && data.success) {
            // this.$message.success(data.msg)
            this.refreshList()
          }
        })
        this.$http({
          url: `/selectcontent/selectContent/save`,
          method: 'post',
          params: {
            'selectGrage': this.checkedGrades.toString(),
            'selectState': this.checkedstate.toString()
          }
        }).then(({data}) => {
          this.loading = false
          if (data && data.success) {
            this.visible = false
            this.$message.success(data.msg)
            this.$emit('refreshDataList')
          }
        })
      },
      // 获取数据列表
      refreshList () {
        this.loading = true
        this.$http({
          url: '/selectcontent/selectContent/list',
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            ...this.searchForm
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.checkedGrades = data.page.list[0].selectGrage.split(',')
            this.checkedstate = data.page.list[0].selectState.split(',')
            this.id = data.page.list[0].id
            this.dataList = data.page.list
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      handleCheckAllChange (val) {
        this.checkedGrades = val ? this.allSelect : []
        this.isIndeterminate = false
      },
      handleCheckedCitiesChange (value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.allSelect.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allSelect.length
      },
      handleCheckAllChan (val) {
        this.checkedState = val ? this.state : []
        this.isIndetermina = false
      },
      handleCheckedCitiesChan (value) {
        let checkedCount = value.length
        this.checkA = checkedCount === this.state.length
        this.isIndetermina = checkedCount > 0 && checkedCount < this.state.length
      }
    }
  }
</script>
